<!--
 * @Description: canvas
 * @Author: rendc
 * @Date: 2025-11-14 14:07:46
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-14 14:22:31
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas</title>
</head>
<body>
  <canvas id="app" height="300" width="400" style="background-color: #f5f5f5;"></canvas>

<script>
//1. 获取canvas元素
var app = document.querySelector("#app")
//2. 获取CanvasRenderingContext2D实例对象，利⽤该实例对象提供的⽅法进⾏图形绘制
var context = app.getContext("2d");
//3. 绘制
context.fillStyle = "pink"
//4. 设置属性
context.fillRect(0,0,100,100);
</script>
</body>
</html>